<template>
  <div id="person-analysis-container">
    <box title="人员分析" :more="false">
      <template v-slot:container>
        <div class="my-chart" id="sex"></div>
        <hr />
        <div class="my-chart" id="type"></div>
      </template>
    </box>
  </div>
</template>

<script>
import box from '@/components/slot_box'
import { fontSize } from '@/utils/filters/filters'
export default {
  name: 'personAnalysis',
  components: {
    box
  },
  props: {
    smallScreen: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      sexData: [
        {
          name: '否',
          value: 13455
        },
        {
          name: '是',
          value: 11
        }
      ],
      typeData: [
        {
          name: '普通市民',
          value: 12345
        },
        {
          name: 'AAAA',
          value: 4515
        },
        {
          name: 'BBBB',
          value: 3450
        },
        {
          name: 'CCCC',
          value: 1522
        }
      ]
    }
  },
  computed: {
    // optionsBySex () {
    //   console.log(this.windowWidth)
    //   return { ...rs }
    // },
    // optionsByTpye () {
    //   return
    // }
  },
  methods: {
    showCharts () {
      this.sex = this.$echarts.init(document.getElementById('sex'))
      this.type = this.$echarts.init(document.getElementById('type'))
    },
    chartResize () {
      const eleArr = [this.sex, this.type]
      for (let i = 0; i < eleArr.length; i++) {
        // 此处定时器是为了在页面存在多个图时，resize方法的调用时间微微错开，避免明显的卡顿
        setTimeout(function () {
          eleArr[i].resize()
        }, 200)
      }
      this.sex.setOption(this.getSexOption())
      this.type.setOption(this.getTypeOption())
    },
    getSexOption () {
      const { smallScreen } = this
      const rs = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            id: 1,
            name: '是否攀爬',
            type: 'pie',
            center: ['20%', '50%'],
            radius: ['60%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: '30%',
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              show: true,
              position: 'center',
              formatter: () => '是否攀爬',
              textStyle: {
                fontSize: smallScreen ? fontSize(28) : fontSize(36),
                color: '#fff'
              }
            },
            data: this.sexData
          }
        ],
        legend: {
          icon: 'rect',
          show: true,
          width: fontSize(550),
          height: fontSize(50),
          itemWidth: fontSize(6),
          itemHeight: smallScreen ? fontSize(70) : fontSize(80),
          top: 'center',
          right: smallScreen ? fontSize(80) : fontSize(22),
          //   backgroundColor: 'rgba(255,255,255,.1)',
          textStyle: {
            color: '#fff',
            fontSize: smallScreen ? fontSize(28) : fontSize(32),
            lineHeight: smallScreen ? fontSize(38) : fontSize(48)
          },
          formatter: (name) => {
            const sum = this.sexData.reduce((curr, item) => {
              return (curr += Number(item.value))
            }, 0)
            const value = this.sexData.find(
              (item) => item.name === name
            ).value
            return (
              name + '\n' + ((value / sum) * 100).toFixed(2) + '%  ' + value
            )
          }
        },
        color: ['#3196fa', '#2fc25b']
      }
      return { ...rs }
    },
    getTypeOption () {
      const { smallScreen } = this
      const rs = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            id: 2,
            name: '类别分析',
            type: 'pie',
            center: ['20%', '50%'],
            radius: ['60%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: fontSize(40),
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              show: true,
              position: 'center',
              formatter: () => '类别分析',
              textStyle: {
                fontSize: smallScreen ? fontSize(28) : fontSize(36),
                color: '#fff'
              }
            },

            data: this.typeData
          }
        ],
        legend: {
          icon: 'rect',
          show: true,
          width: fontSize(550),
          height: fontSize(40),
          itemWidth: fontSize(6),
          itemHeight: smallScreen ? fontSize(70) : fontSize(80),
          top: 'center',
          right: smallScreen ? fontSize(60) : fontSize(20),
          //   backgroundColor: 'rgba(255,255,255,.1)',
          textStyle: {
            color: '#fff',
            fontSize: smallScreen ? fontSize(28) : fontSize(32),
            lineHeight: smallScreen ? fontSize(38) : fontSize(48)
          },
          formatter: (name) => {
            const sum = this.typeData.reduce((curr, item) => {
              return (curr += item.value)
            }, this.typeData[0].value)

            const value = this.typeData.find(
              (item) => item.name === name
            ).value
            return (
              name + '\n' + ((value / sum) * 100).toFixed(2) + '%  ' + value
            )
          }
        },
        color: ['#3196fa', '#2fc25b', '#f0c500', '#ef4864']
      }
      return rs
    }
  },
  mounted () {
    this.showCharts()
    this.sex.setOption(this.getSexOption())
    this.type.setOption(this.getTypeOption())
    window.addEventListener('resize', this.chartResize)
  },
  destroyed () {
    window.removeEventListener('resize', null)
  }
}
</script>

<style scoped>
.my-chart {
  width: 100%;
  height: 310px;
}
hr {
  width: 70%;
  margin: 0 auto;
}
</style>
